<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart-Splits 可视化配置器</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-th-large"></i> Smart-Splits 可视化配置器</h1>
            <div class="language-switch">
                <button id="lang-zh" class="active">中文</button>
                <button id="lang-en">English</button>
            </div>
        </header>

        <main>
            <div class="config-panel">
                <h2 data-i18n="keybindings">键位绑定</h2>
                
                <div class="keybinding-section">
                    <h3 data-i18n="movement">窗口移动</h3>
                    <div class="key-grid">
                        <div class="key-item" data-action="move-left">
                            <label data-i18n="move_left">左移</label>
                            <div class="key-input" data-direction="left">
                                <kbd>Ctrl</kbd> + <kbd>h</kbd>
                            </div>
                        </div>
                        <div class="key-item" data-action="move-down">
                            <label data-i18n="move_down">下移</label>
                            <div class="key-input" data-direction="down">
                                <kbd>Ctrl</kbd> + <kbd>j</kbd>
                            </div>
                        </div>
                        <div class="key-item" data-action="move-up">
                            <label data-i18n="move_up">上移</label>
                            <div class="key-input" data-direction="up">
                                <kbd>Ctrl</kbd> + <kbd>k</kbd>
                            </div>
                        </div>
                        <div class="key-item" data-action="move-right">
                            <label data-i18n="move_right">右移</label>
                            <div class="key-input" data-direction="right">
                                <kbd>Ctrl</kbd> + <kbd>l</kbd>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="keybinding-section">
                    <h3 data-i18n="resize">窗口调整</h3>
                    <div class="key-grid">
                        <div class="key-item" data-action="resize-left">
                            <label data-i18n="resize_left">向左调整</label>
                            <div class="key-input" data-direction="left-resize">
                                <kbd>Alt</kbd> + <kbd>Ctrl</kbd> + <kbd>h</kbd>
                            </div>
                        </div>
                        <div class="key-item" data-action="resize-down">
                            <label data-i18n="resize_down">向下调整</label>
                            <div class="key-input" data-direction="down-resize">
                                <kbd>Alt</kbd> + <kbd>Ctrl</kbd> + <kbd>j</kbd>
                            </div>
                        </div>
                        <div class="key-item" data-action="resize-up">
                            <label data-i18n="resize_up">向上调整</label>
                            <div class="key-input" data-direction="up-resize">
                                <kbd>Alt</kbd> + <kbd>Ctrl</kbd> + <kbd>k</kbd>
                            </div>
                        </div>
                        <div class="key-item" data-action="resize-right">
                            <label data-i18n="resize_right">向右调整</label>
                            <div class="key-input" data-direction="right-resize">
                                <kbd>Alt</kbd> + <kbd>Ctrl</kbd> + <kbd>l</kbd>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="options-section">
                    <h3 data-i18n="options">选项设置</h3>
                    <div class="option-item">
                        <label>
                            <input type="checkbox" id="multiplexer" checked>
                            <span data-i18n="enable_multiplexer">启用终端复用器支持</span>
                        </label>
                    </div>
                    <div class="option-item">
                        <label>
                            <input type="checkbox" id="ignored_buftypes" checked>
                            <span data-i18n="ignore_special">忽略特殊缓冲区</span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="preview-panel">
                <h2 data-i18n="preview">实时预览</h2>
                <div class="preview-container">
                    <div class="window-layout">
                        <div class="window-pane" id="pane-1">
                            <div class="pane-header">窗口 1</div>
                            <div class="pane-content">
                                <i class="fas fa-file-code"></i>
                                <span>main.lua</span>
                            </div>
                        </div>
                        <div class="window-pane" id="pane-2">
                            <div class="pane-header">窗口 2</div>
                            <div class="pane-content">
                                <i class="fas fa-file-alt"></i>
                                <span>config.lua</span>
                            </div>
                        </div>
                        <div class="window-pane" id="pane-3">
                            <div class="pane-header">窗口 3</div>
                            <div class="pane-content">
                                <i class="fas fa-terminal"></i>
                                <span>terminal</span>
                            </div>
                        </div>
                    </div>
                    <div class="preview-controls">
                        <button class="preview-btn" data-direction="left">
                            <i class="fas fa-arrow-left"></i>
                        </button>
                        <button class="preview-btn" data-direction="down">
                            <i class="fas fa-arrow-down"></i>
                        </button>
                        <button class="preview-btn" data-direction="up">
                            <i class="fas fa-arrow-up"></i>
                        </button>
                        <button class="preview-btn" data-direction="right">
                            <i class="fas fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="output-panel">
                <h2 data-i18n="generated_config">生成的配置</h2>
                <div class="code-container">
                    <pre><code id="generated-code"></code></pre>
                    <button id="copy-btn" class="copy-button">
                        <i class="fas fa-copy"></i>
                        <span data-i18n="copy">复制</span>
                    </button>
                </div>
                <div class="share-section">
                    <button id="share-btn" class="share-button">
                        <i class="fas fa-share-alt"></i>
                        <span data-i18n="generate_share">生成分享链接</span>
                    </button>
                    <div id="share-link" class="share-link" style="display: none;">
                        <input type="text" readonly>
                        <button id="copy-link-btn">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="script.js"></script>
</body>
</html>
